<template>
  <view class="asset-list" @touchend.stop="touchend">

    <view v-for="(item,index) in dataList" :key="index" class="asset-info"
      :class="[dataList.length == index ? 'asset-bottom-last' : 'asset-bottom-border']">
      <view class="asset-info-image">
        <u-image width="100%" height="100%" :src="getImgUrl(item)"></u-image>
        <view class="asset-info-map-top-card" :style="{'background-color': usageColors[item.usage - 1].color}">{{usageColors[item.usage - 1].name}}</view>
        <!-- tupian -->
      </view>
      <view class="asset-info-text">
        <view class="asset-info-text-title" @click="handelSelAsset(item)">{{`${item.assetName} >`}}</view>
        <view class="asset-info-text-detail">{{`资产编码：${item.code}  所属公司/持有人：${item.belong}`}}</view>
        <view class="asset-info-text-detail">{{`资产组名称：${item.groupName ? item.groupName : ''}`}}</view>
        <view class="asset-info-text-detail">{{`地址：${item.address ? item.address : ''}`}}</view>
      </view>
      <view class="asset-info-map" @click="handleToMap(item)">
        <view class="asset-info-map-top">
          <u-image width="100%" height="100%" :src="src1"></u-image>
        </view>
        <view class="asset-info-map-bottom">地图</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      //地图级别
      level: {
        type: Number,
        default: 1
      },
      //区域IDs
      provinceIds: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        dataList: [],
        src1: "../../../../../static/img/property/map_sel.png",
        usageColors: [{
            name: '使用中',
            color: '#2E88F3'
          },
          {
            name: '闲置中',
            color: '#FF6851'
          },
          {
            name: '已出租',
            color: '#00C377'
          },
          {
            name: '已售卖',
            color: '#999999'
          },
          {
            name: '已抵押',
            color: '#FF7600'
          }
        ],
      }
    },
    watch: {
      immediate: true,
      provinceIds: function(newQuestion, oldQuestion) {
        this.initData()
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
		touchend() {
			
		},
      initData() {
        let _query = {
          level: this.level,
        }
        if (this.provinceIds) {
          _query.provinceIds = this.provinceIds
        }
        this.$u.api.statisticsAssetInfo(_query).then(res => {
          if (!res) {
            return
          }
          this.dataList = res
        }).catch(err => {
          console.error(err)
        })
      },
      handelSelAsset(item) {
        this.$u.route({
          url: 'pages/work/apply/property/report/assetInfo',
          params: {
            assetId: item.assetId
          }
        })
        // this.$parent.$refs.assetInfo.initData(item)
      },
      handleToMap(item){
        this.$parent.SetPostion(item)
      },
      getImgUrl(item){
        if(!item.imgUrl){
          return '../../../../../static/img/property/asset_empty.png'
        }
        return this.$u.http.config.baseUrl + item.imgUrl
      }
    }
  }
</script>

<style lang="scss" scoped>
  .asset-list {
    padding: 66rpx;
    height: 100%;
    overflow-y: auto;

    .asset-bottom-border {
      border-bottom: 2rpx solid #F7F7F7;
      padding-bottom: 14rpx;
      margin-bottom: 39rpx;
    }

    .asset-bottom-last {
      padding-bottom: 14rpx;
      margin-bottom: 39rpx;
    }

    .asset-info {
      width: 100%;
      display: flex;



      .asset-info-image {
        width: 160rpx;
        height: 160rpx;
        position: relative;
        
        .asset-info-map-top-card{
          text-align: center;
          font-size: 24rpx;
          padding: 1px;
          color: white;
          top:-4px;
          right:-4px;
          width: 90rpx;
          height: 40rpx;
          position: absolute;
          background-color: #000;
          border-top-right-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
        }
      }

      .asset-info-text {
        flex-grow: 1;
        margin-left: 45rpx;

        .asset-info-text-title {
          font-size: 40rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 14rpx;
        }

        .asset-info-text-detail {
          font-size: 30rpx;
          font-weight: 400;
          color: #666666;
          margin-bottom: 11rpx;
        }
      }

      .asset-info-map {
        margin: 0 20rpx;
        align-self: center;

        .asset-info-map-top {
          text-align: center;
          width: 60rpx;
          padding: 0 6rpx;
          height: 48rpx;
        }

        .asset-info-map-bottom {
          width: 60rpx;
          text-align: center;
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
</style>
